<script setup>
import {onMounted, ref} from 'vue';
import luckysheet from "luckysheet";
import AnalyesAPI from "@/api/system/analyes.ts";
import {useAnalysetStore} from "@/store/index.ts";
import dayjs from "dayjs";


const sheetData = ref('')
const waterForm = ref({
  pxycd: {},
  bzycd: {},
  bzhcyllz: {},
  cdz: {},
})
const checkTime = ref('')
const processedData = ref([])
const checkDialogVisible = ref(false)
const analyseStatusPage = useAnalysetStore()
const record_sn = analyseStatusPage.waterForm.record_sn
// 在组件挂载后初始化 Lucky-sheet
// onMounted(() => {
//   // 初始化表格
//   luckysheet.create(options);
//   // 获取初始数据并保存在响应式变量中
//   sheetData.value = options.data
//   // 获取表单信息
//   getWaterCapacity()
// });

// 用于获取最新的表格数据
const getUpdatedData = () => {
  checkDialogVisible.value = true
};
const handleCheckClose = () => {
  checkDialogVisible.value = false
}


// 获取工作表信息
const getWaterCapacity = () => {
  AnalyesAPI.getAnalyseACapacity({id: analyseStatusPage.waterForm.id, record_sn: record_sn}).then(data => {
    console.log('获取水质容量 A单', data)
    waterForm.value = data
    sheetData.value = JSON.parse(data.configs)
    processedData.value = data.adatas
  })
}

// 保存新增表单
const handleAddWaterPh = () => {
  console.log(luckysheet.getLuckysheetfile())
  sheetData.value = luckysheet.getLuckysheetfile();
  options.data = sheetData.value; // 将字符串解析为 JSON
  console.log(options.data)
  const data = options.data[0].data.map(row => {
    return row
        .map(cell => {
          return cell ? {
            field: cell.m || "默认字段",
            value: cell.v || null
          } : null;
        })
        .filter(cell => cell !== null); // 删除 null 值
  });
  console.log(data);
  processedData.value = processData(data);
  console.log(processedData.value)

  waterForm.value.pxycd.averageTow = waterForm.value.pxycd.average
  waterForm.value.pxycd.differenceTow = waterForm.value.pxycd.difference
  waterForm.value.pxycd.allowedTow = waterForm.value.pxycd.allowed
  waterForm.value.pxycd.qualifiedTow = waterForm.value.pxycd.qualified
  waterForm.value.pxycd.averageFour = waterForm.value.pxycd.averageThree
  waterForm.value.pxycd.differenceFour = waterForm.value.pxycd.differenceThree
  waterForm.value.pxycd.allowedFour = waterForm.value.pxycd.allowedThree
  waterForm.value.pxycd.qualifiedFour = waterForm.value.pxycd.qualifiedThree

  //   调保存新增接口
  AnalyesAPI.addWaterCapacity({
    ...waterForm.value,
    // record_sn: record_sn,
    record_sn: 40,
    // id: analyseStatusPage.waterForm.id,
    task_id: analyseStatusPage.waterForm.taskId,
    configs: sheetData.value,
    add_form_id: analyseStatusPage.waterForm.add_form_id,
    adatas: processedData.value,
  }).then(data => {
    console.log('调接口拿数据', data)
  })
}

// 处理能用的数据
const processData = (data) => {
  if (!data || data.length < 2) {
    return [];
  }

  // 提取表头
  const headers = data[0].map(item => item.field || "");

  // 提取数据行
  const values = data[1].map(item => item.value ?? null);

  // 构建结果
  const result = [];
  const rowObject = {};
  headers.forEach((header, index) => {
    if (header.trim()) {
      rowObject[header] = values[index] ?? null;
    }
  });

  result.push(rowObject);

  return result;
};


// 确认提交校核
const handleSubmit = () => {
  console.log(checkTime.value)
  const formattedDate = checkTime.value ? dayjs(checkTime.value).format('YYYY-MM-DD') : '';
  console.log(analyseStatusPage.waterForm.id)
  AnalyesAPI.handleCheckTimeData({
    id: analyseStatusPage.waterForm.add_form_id,
    submit_date: formattedDate
  }).then(data => {
    if (data === 1) {
      ElMessage.success('提交成功！')
      checkDialogVisible.value = false
    }
  })
}
</script>

<template>
  <div class="card">
    <el-card class="box-card">
      <h1 style="text-align: center">高氯废水 化学需氧量分析原始记录（B面）</h1>
      <div>SXLPHJ/JL/CX-22-51</div>
      <table class="table">
        <tr>
          <td colspan="8">
            <div class="table-td">
              溶液配制
            </div>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td>标准溶液名称</td>
          <td colspan="3">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.task_name"/>
          </td>
          <td>标准物质批号/生产厂商</td>
          <td colspan="3">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.sampling_time"/>
          </td>
        </tr>
        <tr>
          <td>标准物质取样质量(g)</td>
          <td colspan="3">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.task_name"/>
          </td>
          <td>定容体积（mL）</td>
          <td colspan="3">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.sampling_time"/>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td>配制日期</td>
          <td colspan="3">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.task_name"/>
          </td>
          <td>标准物质浓度(     )</td>
          <td colspan="3">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.sampling_time"/>
          </td>
        </tr>
        <tr>
          <td>基准溶液名称</td>
          <td colspan="3">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.task_name"/>
          </td>
          <td>基准物质批号/生产厂商</td>
          <td colspan="3">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.sampling_time"/>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td>基准物质取样质量(g)</td>
          <td colspan="3">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.task_name"/>
          </td>
          <td>定容体积（mL）</td>
          <td colspan="3">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.sampling_time"/>
          </td>
        </tr>
        <tr>
          <td>配制日期</td>
          <td colspan="3">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.task_name"/>
          </td>
          <td>基准物质浓度(      )</td>
          <td colspan="3">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.sampling_time"/>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td colspan="8">
            <div class="table-td">
              标定过程
            </div>
          </td>
        </tr>
        <tr>
          <td>取基准溶液体积(mL)</td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.task_name"/>
          </td>
          <td>溶剂</td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.sampling_time"/>
          </td>
          <td>定容体积(mL)</td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.sampling_time"/>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td>计算公式</td>
          <td colspan="7">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.task_name"/>
          </td>
        </tr>
        <tr>
          <td rowspan="2">滴定次数</td>
          <td colspan="4" style="text-align: center">滴定体积（mL）</td>
          <td colspan="3" rowspan="2">平均净用量</td>
        </tr>
        <tr>
          <td>始读数</td>
          <td colspan="2">终读数</td>
          <td>净用量V</td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td>第一次</td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
            v-model="waterForm.bzhcyllz.bzhcyllz_1"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
            v-model="waterForm.bzhcyllz.bzhcyllz_1"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
            v-model="waterForm.bzhcyllz.bzhcyllz_1"/>
          </td>
          <td colspan="3" rowspan="4">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
            v-model="waterForm.bzhcyllz.bzhcyllz_1"/>
          </td>
        </tr>
        <tr>
          <td>第二次</td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
            v-model="waterForm.bzhcyllz.bzhcyllz_1"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
            v-model="waterForm.bzhcyllz.bzhcyllz_1"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
            v-model="waterForm.bzhcyllz.bzhcyllz_1"/>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td>第三次</td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
            v-model="waterForm.bzhcyllz.bzhcyllz_1"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
            v-model="waterForm.bzhcyllz.bzhcyllz_1"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
            v-model="waterForm.bzhcyllz.bzhcyllz_1"/>
          </td>
        </tr>
        <tr>
          <td>第四次</td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
            v-model="waterForm.bzhcyllz.bzhcyllz_1"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
            v-model="waterForm.bzhcyllz.bzhcyllz_1"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
            v-model="waterForm.bzhcyllz.bzhcyllz_1"/>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td colspan="2">标准溶液浓度C0</td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
              <template #append>
                <span style="background-color: transparent;color: black">mol/L </span>
              </template>
            </el-input>
          </td>
          <td colspan="1">基准溶液浓度C1</td>
          <td colspan="3">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
              <template #append>
                <span style="background-color: transparent;color: black">mol/L </span>
              </template>
            </el-input>
          </td>
        </tr>
        <tr>
          <td colspan="8">
            <div class="table-td">
              平行样测定
            </div>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td colspan="1">平行样编号</td>
          <td colspan="2" style="text-align: center;">与</td>
          <td colspan="2" style="text-align: center;">与</td>
          <td colspan="3" style="text-align: center;">与</td>
        </tr>
        <tr>
          <td>测定浓度（ ）</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td colspan="2"></td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td>
            <el-radio-group>
            <el-radio value="Value 1">相对偏差</el-radio>
            <el-radio label="Label 2 & Value 2">——————</el-radio>
            </el-radio-group>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          <td colspan="3">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          </tr>
        <tr>
          <td>质控要求</td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          <td colspan="3">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td>是否合格</td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          <td colspan="3">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
        </tr>
        <tr>
          <td colspan="8">
            <div class="table-td">
              标准样品测定
            </div>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td colspan="2">标样批号</td>
          <td colspan="2">测定浓度（ ）</td>
          <td colspan="2">标准值（ ）</td>
          <td colspan="2">是否合格</td>
        </tr>
        <tr>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
        </tr>
        <tr>
          <td colspan="8" style="text-align: center">加标回收样测定</td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td>样品编号</td>
          <td>标态浓度（ ）</td>
          <td>加标量（ ）</td>
          <td>加标后样品含量/浓度（ ）</td>
          <td>原样品含量/浓度（ ）</td>
          <td>回收率（%）</td>
          <td>质控要求</td>
          <td>是否合格</td>
        </tr>
        <tr>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder=""
                      v-model="waterForm.temperature_bc">
            </el-input>
          </td>
        </tr>
        <tr>
          <td>备注</td>
          <td colspan="7">
            <el-input style="width: 240px;border: 1px solid transparent" />
          </td>
        </tr>
      </table>
    </el-card>
    <el-card class="box-card" style="margin-top: 30px">
      <div style="display: flex;justify-content: space-between;">
        <!--        占位盒子-->
        <div></div>
        <div>
          <el-button>取消</el-button>
          <!--          <el-button>新增</el-button>-->
          <!--          <el-button>复制并新增</el-button>-->
          <el-button @click="handleAddWaterPh">保存</el-button>
          <el-button type="primary" @click="getUpdatedData">提交</el-button>
        </div>
      </div>
    </el-card>
    <!--    提交校核-->
    <el-dialog title="提交校核" v-model="checkDialogVisible" width="30%" center
               :before-close="handleCheckClose">
      <div class="check">
        <!--        头部-->
        <div class="check-header" style="display: flex;align-items: center;margin-bottom: 20px">
          <p>表单填写日期：</p>
          <el-date-picker
              style="border: 1px solid #cccccc;border-radius: 6px;width: 70%;"
              type="date"
              placeholder="请选择"
              v-model="checkTime"
          />
        </div>
        <div class="check-footer">
          <el-button style="width: 48%;" @click="handleCheckClose">取消</el-button>
          <el-button type="primary" style="width: 48%;" @click="handleSubmit">确认</el-button>
        </div>
      </div>
    </el-dialog>
  </div>

</template>

<style scoped>
.card {
  padding: 20px 25px;
}

.table {
  width: 100%;
  border-collapse: collapse; /* 表格边框合并 */
  text-align: left; /* 默认左对齐 */
  font-size: 14px; /* 字体大小 */
  color: #606266; /* 默认字体颜色 */
}

.table th,
.table td {
  border: 1px solid #c2bfbf; /* 表格单元格边框颜色 */
  padding: 12px; /* 单元格内边距 */
}

.table th {
  background: #f5f7fa; /* 表头背景色 */
  font-weight: 600; /* 表头字体加粗 */
  color: #303133; /* 表头字体颜色 */
  text-align: center; /* 表头居中 */
}

.table td {
  width: 15%;
}

.table-td {
  display: flex;
  justify-content: center;
  font-weight:500;
  color: #303133;
}


::v-deep .el-input__wrapper {
  background-color: transparent;
  box-shadow: none;
  flex-direction: row-reverse;
}

::v-deep .el-select__wrapper {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-input-group__append {
  background-color: transparent;
  box-shadow: none;
}
</style>
